<template>
  <div>
      <Breadcard name1="商品管理" name2="分类参数"/>
      <el-card>
          <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false">
          </el-alert>
          <el-row class="cat_opt">
              <el-col>
                  <span>选择商品分类：</span>
                  <el-cascader
                    :props="{ expandTrigger: 'hover',...cascaderProps }"
                    v-model="selectedKeys"
                    :options="cateList"
                    @change="handleChange" 
                    clearable>
                </el-cascader>
              </el-col>
          </el-row>
          <!--tab页签区域-->
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="动态参数" name="many">
                <el-button type="primary" :disabled="isBtndiabled" @click="showparamsDialog">添加参数</el-button>
                <el-table :data="manyList">
                    <el-table-column type="expand"></el-table-column>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="参数名称" prop="attr_name"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="showeditDialog(scope.row.attr_id)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="delParams(scope.row.attr_id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="静态参数" name="only">
                <el-button type="primary" :disabled="isBtndiabled" @click="showparamsDialog">添加属性</el-button>
                <el-table :data="onlyList">
                    <el-table-column type="expand"></el-table-column>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="属性名称" prop="attr_name"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="showeditDialog(scope.row.attr_id)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="delParams(scope.row.attr_id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
          </el-tabs>
      </el-card>
      <el-dialog
        :title="'添加' + titleText"
        @close="clearParamsdialog"
        :visible.sync="paramsDialogVisible"
        width="50%">
        <el-form :model="addPramasForm" status-icon ref="paramsFormRef" label-width="100px">
            <el-form-item :label="titleText" prop="attr_name">
                <el-input v-model="addPramasForm.attr_name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="paramsDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addParams">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="'编辑' + titleText"
        @close="cleareditParamsdialog"
        :visible.sync="editparamsDialogVisible"
        width="50%">
        <el-form :model="editPramasForm" status-icon ref="editparamsFormRef" label-width="100px">
            <el-form-item :label="titleText" prop="attr_name">
                <el-input v-model="editPramasForm.attr_name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editparamsDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editParams">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import Breadcard from '../../components/Breadcard/Breadcard.vue'
export default {
    components:{
        Breadcard
    },
    data () {
        return {
            cateList:[],
            //选中的父级分类的id数组
            selectedKeys:[],
            //指定级联选择器的配置对象
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            //tab页签
            activeName:'many',
            //动态参数列表
            manyList:[],
            //静态属性列表
            onlyList:[],
            //控制添加参数/属性按钮显隐
            paramsDialogVisible:false,
            //要添加的参数或属性
            addPramasForm:{
                attr_name:'',
            },
            //控制编辑对话框显隐
            editparamsDialogVisible:false,

            editPramasForm:{}
            
        }
    },
    created () {
        this.getCateList()
    },
    methods: {
         async getCateList(){
             const {data:res} = await this.$http.get('categories')
             if(res.meta.status !== 200){
                 return this.$message.error('获取商品列表失败')
             }
             this.cateList = res.data
        },
        handleChange(){
            this.getParentParams()
        },
         async getParentParams(){
            //判断选择的是否为第三级分类
            if(this.selectedKeys.length !== 3){
                this.selectedKeys = []
                return
            }
            //根据所选分类的id和所选的button获取相应的数据
            const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,
            {params:{sel:this.activeName}})
            if(res.meta.status !== 200){
                return this.$message.error('获取参数列表失败')
            }
            console.log(res.data)
            if(this.activeName === 'many'){
                this.manyList = res.data
            }else if(this.activeName === 'only'){
                this.onlyList = res.data
            }
        },
        //tab标签点击切换事件
        handleTabClick(){
            this.getParentParams()
            console.log(this.activeName)
        },
        //点击添加属性/参数对话框显隐
        showparamsDialog(){
            this.paramsDialogVisible = true
        },
        //添加参数或属性按钮
        clearParamsdialog(){
            this.$refs.paramsFormRef.resetFields()
        },
        //点击按钮添加参数
            async addParams(){
                const {data:res} = await this.$http.post(`categories/${this.cateId}/attributes`,{
                    attr_name:this.addPramasForm.attr_name,
                    attr_sel:this.activeName
                })
                if(res.meta.status !== 201){
                    return this.$message.error('添加失败')
                }
                this.$message.success('添加成功')
                this.getCateList()
                this.paramsDialogVisible = false
            },
            //编辑按钮
            async  showeditDialog(attr_id){
                const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`,{
                    params:{attr_sel:this.activeName}
                })
                if(res.meta.status !== 200){
                    return this.$message.error('获取当前参数失败')
                }
                this.editPramasForm = res.data
                this.editparamsDialogVisible = true
                console.log(this.editPramasForm)
            },
            //清空编辑对话框
            cleareditParamsdialog(){
                this.$refs.editparamsFormRef.resetFields()
            },
            //编辑按钮，修改参数
            async  editParams(){
                const {data:res} = await this.$http.put(`categories/${this.cateId}/attributes/${this.editPramasForm.attr_id}`,{
                        attr_name:this.editPramasForm.attr_name,
                        attr_sel:this.editPramasForm.attr_sel
                })
                if(res.meta.status !== 200){
                    return this.$message.error('修改失败')
                }
                this.$message.success('修改成功')
                this.getCateList()
                this.editparamsDialogVisible = false
            },
            //删除按钮，删除参数
            async delParams(attr_id){
                const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                if(result !== 'confirm'){
                    return this.$message.error('已取消删除')
                }
                const {data:res} = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)
                if(res.meta.status !== 200){
                    return this.$message.error('删除失败')
                }
                this.$message.success('删除成功')
                this.getCateList()
            }
    },
    computed:{
        isBtndiabled(){
            if(this.selectedKeys.length !== 3){
                return true
            }
            return false
        },
        //当前选中的三级分类的id
        cateId(){
            if(this.selectedKeys.length === 3){
                return this.selectedKeys[2]
            }
            return null
        },
        //动态计算对话框的标题文字
        titleText(){
            if(this.activeName === 'many'){
                return '动态参数'
            }else if(this.activeName === 'only'){
                return '静态属性'
            }
        }
    }
}
</script>

<style lang="less" scoped>
.cat_opt{
    margin: 15px 0;
}
</style>